<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" ;charset="gb2312">
<title>CoolMeeting会议管理系统</title>
<link rel="stylesheet" href="styles/common.css" />
<script type="text/javascript"
	src="My97DatePicker/WdatePicker.js"></script>
<style type="text/css">
#divfrom {
	float: left;
	width: 150px;
}

#divto {
	float: left;
	width: 150px;
}

#divoperator {
	float: left;
	width: 50px;
	padding: 60px 5px;
}

#divoperator input[type="button"] {
	margin: 10px 0;
}

#selDepartments {
	display: block;
	width: 100%;
}

#selEmployees {
	display: block;
	width: 100%;
	height: 200px;
}

#selSelectedEmployees {
	display: block;
	width: 100%;
	height: 225px;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script>
  function getRoomByStartTimeAndEndTime(){
	  var roomcapacity = $('#roomcapacity').val();
	  var starttime = $('#starttime').val();
	  var endtime = $('#endtime').val();
	  $.ajax({
		  url:"/selectOrderRoom",
		  type:"get",
		  data:{'roomcapacity':roomcapacity,'begintime':starttime,'endtime':endtime},
		  dataType:"json",
		  success:function(data){
			  $('#roomId').empty();
			  $.each(data,function(i,room){
				  var node='<option value="'+room.roomid+'">'+room.roomname+'</option>';
				  $('#roomId').append(node);
			  });
		  },
		  error:function(xmlHttpRequest){
			  alert(xmlHttpRequest.status);
		  }
	  })
  }
  $(function(){
	  $.ajax({
		  url:"/selectDeptsAndRoles",
		  type:"get",
		  dataType:"json",
		  success:function(data){
			  $('#selDepartments').empty();
			  $.each(data.depts,function(i,dept){
				  var node='<option value="'+dept.departmentid+'">'+dept.departmentname+'</option>';
				  $('#selDepartments').append(node);
			  });
			  deptchange();
			 
		  },
		  error:function(xmlHttpRequest){
			  alert(xmlHttpRequest.status);
		  }
	  });
	  $('#selDepartments').change(deptchange);
  });
  function deptchange(){
	  $.ajax({
		  url:"/selectByDeptno",
		  type:"get",
		  data:{'departmentid':$('#selDepartments').val()},
		  dataType:"json",
		  success:function(data){
			  $('#selEmployees').empty();
			  $.each(data,function(i,emp){
				  var node='<option value="'+emp.employeeid+'">'+emp.employeename+'</option>';
				  $('#selEmployees').append(node);
			  });
			 
		  },
		  error:function(xmlHttpRequest){
			  alert(xmlHttpRequest.status);
		  }
	  })
  }
  function selectEmployees(){
	  var nodes = $('#selEmployees').children(':selected');
	  $('#selSelectedEmployees').append(nodes);
  }
  function deSelectEmployees(){
	  var nodes = $('#selSelectedEmployees').children(':selected');
	  $('#selEmployees').append(nodes);
  }
</script>
</head>
<body onload="body_load()">
	<div class="page-header">
		<div class="header-banner">
			<img src="images/header.png" alt="CoolMeeting" />
		</div>
		<div class="header-title">欢迎访问Cool-Meeting会议管理系统</div>
		<div class="header-quicklink">
			欢迎您，<strong>${emp.employeename }</strong> <a href="changepassword.html">[修改密码]</a>
		</div>
	</div>
	<div class="page-body">
		<div class="page-sidebar">
			<div class="sidebar-menugroup">
				<div class="sidebar-grouptitle">个人中心</div>
				<ul class="sidebar-menu">
					<li class="sidebar-menuitem"><a href="notifications.jsp">最新通知</a></li>
					<li class="sidebar-menuitem active"><a href="myOrderMeeting">我的预定</a></li>
					<li class="sidebar-menuitem"><a href="mymeetings.html">我的会议</a></li>
				</ul>
			</div>
			<div class="sidebar-menugroup">
				<div class="sidebar-grouptitle">人员管理</div>
				<ul class="sidebar-menu">
					<li class="sidebar-menuitem"><a href="selectAllDepts">部门管理</a></li>
					<li class="sidebar-menuitem"><a href="register.jsp">员工注册</a></li>
					<li class="sidebar-menuitem"><a href="selectApproveAccount">注册审批</a></li>
					<li class="sidebar-menuitem"><a href="searchEmployees?employeestatus=1">搜索员工</a></li>
				</ul>
			</div>
			<div class="sidebar-menugroup">
				<div class="sidebar-grouptitle">会议预定</div>
				<ul class="sidebar-menu">
					<li class="sidebar-menuitem"><a href="addmeetingroom.jsp">添加会议室</a></li>
					<li class="sidebar-menuitem"><a href="selectMeetingRoom">查看会议室</a></li>
					<li class="sidebar-menuitem"><a href="bookmeeting.jsp">预定会议</a></li>
					<li class="sidebar-menuitem"><a href="selectMeetingPage">搜索会议</a></li>
				</ul>
			</div>
		</div>
		<div class="page-content">
			<div class="content-nav">会议预定 > 预定会议</div>
			<form action="orderMeeting">
				<fieldset>
					<legend>会议信息</legend>
					<table class="formtable">
						<tr>
							<td>会议名称：</td>
							<td><input type="text" name="meetingname" maxlength="20" /></td>
						</tr>
						<tr>
							<td>预计参加人数：</td>
							<td><input type="text" id="roomcapacity" name="numofparticipants" /></td>
						</tr>
						<tr>
							<td>预计开始时间：</td>
							<td><input class="Wdate" type="text" id="starttime"
							name="begintime"
							onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"></td>
						</tr>
						<tr>
							<td>预计结束时间：</td>
							<td><input class="Wdate" type="text" id="endtime"
							name="endtime"
							onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"></td>
						</tr>
						<tr>
						<td>选择会议室：</td>

						<td><select id="roomId" name="roomid"
							onfocus="getRoomByStartTimeAndEndTime()">
								<option>请选择会议室</option>
						</select></td>
					</tr>
						<tr>
							<td>会议说明：</td>
							<td><textarea name="description" rows="5"></textarea></td>
						</tr>
						<tr>
							<td>选择参会人员：</td>
							<td>
								<div id="divfrom">
									<select id="selDepartments" onchange="fillEmployees()">
									</select> <select id="selEmployees" multiple="true">
									</select>
								</div>
								<div id="divoperator">
									<input type="button" class="clickbutton" value="&gt;"
										onclick="selectEmployees()" /> <input type="button"
										class="clickbutton" value="&lt;" onclick="deSelectEmployees()" />
								</div>
								<div id="divto">
									<select id="selSelectedEmployees" name = "employeeids" multiple="true">
									</select>
								</div>
							</td>
						</tr>
						<tr>
							<td class="command" colspan="2"><input type="submit"
								class="clickbutton" value="预定会议" /> <input type="reset"
								class="clickbutton" value="重置" /></td>
						</tr>
					</table>
				</fieldset>
			</form>
		</div>
	</div>
	<div class="page-footer">
		<hr />
		更多问题，欢迎联系<a href="mailto:webmaster@eeg.com">管理员</a> <img
			src="images/footer.png" alt="CoolMeeting" />
	</div>
</body>
</html>